<template>
  <div class="app-container">
    <el-form :inline="true" :model="searchObj">
      <el-form-item >
        <el-input v-model="searchObj.name" placeholder="讲师"/>
      </el-form-item>
      <el-form-item >
        <el-select v-model="searchObj.level" placeholder="头衔">
          <el-option label="高级讲师" value="1"/>
          <el-option label="首席讲师" value="2"/>
        </el-select>
        <el-form-item label="入驻时间" required>
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker v-model="searchObj.joinDateBegin" type="date" placeholder="开始时间" />
            </el-form-item>
          </el-col>
          <el-col :span="2" class="line">-</el-col>
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker v-model="searchObj.joinDateEnd" type="date" placeholder="结束时间" />
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
        <el-button type="default" @click="resetData()">清空</el-button>
      </el-form-item>
      <el-form-item >
        <el-button type="danger" @click="deleteByids">批量删除</el-button>
        <el-table
          :data="teachers"
          style="width: 100%
          ;padding:15px"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55"/>
          <el-table-column
            type="index"
            label="#"
            width="50">
            <template slot-scope="scope">
              {{ (pageNum - 1) * pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="120"/>
          <el-table-column
            prop="avatar"
            label="讲师头像"
            width="120">
            <template slot-scope="scope">
              <img v-if="scope.row.avatar" :src="scope.row.avatar" style="width:50px;height:50px" alt="">
              <img v-else src="https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_handsome.jpg?imageView2/1/w/80/h/80" style="width:50px;height:50px">
            </template>
          </el-table-column>
          <el-table-column
            prop="level"
            label="头衔"
            width="120">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.level > '1' ? 'primary' : 'success'"
                disable-transitions>{{ scope.row.level>1 ? '首席讲师':'高级讲师' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="career"
            label="资历"
            width="600px"
          />
          <el-table-column
            prop="sort"
            label="排序"
            width="100"/>
          <el-table-column
            prop="joinDate"
            label="入驻时间"
            width="100"/>
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="updateById(scope.row.id)">修改</el-button>
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeById(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="pageNum"
          :page-sizes="[3, 5, 10, 50]"
          :page-size="pageSize"
          :total="total"
          style="text-align:right ;margin:30px"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
  </el-form-item></el-form></div>
</template>
<script>
import teacherApi from '@/api/teacherApi'
export default {
  data() {
    return {
      teachers: [],
      pageSize: 3,
      pageNum: 1,
      total: 100,
      searchObj: {},
      selection: [],
      ids: []
    }
  },
  created() {
    // this.getList()
    this.getPageList()
  },
  methods: {
    // 查询所有的讲师
    getList() {
      teacherApi.list().then(r => {
        this.teachers = r.data.items
        console.log(r.data.items)
      })
    },
    // 分页查询讲师
    getPageList() {
      teacherApi.pagelist(this.pageNum, this.pageSize, this.searchObj).then(r => {
        this.teachers = r.data.page.records
        this.total = r.data.page.total
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getPageList()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.getPageList()
    },
    // 带查询条件的 查询
    fetchData() {
      this.getPageList()
    },
    // 清空查询列表，并重置查询
    resetData() {
      this.searchObj = {}
      this.pageNum
      this.getPageList()
    },
    removeById(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        teacherApi.deleteById(id).then(r => {
          this.getPageList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    updateById(id) {
      this.$router.push(`/teacher/update/${id}`)
    },
    // 批量删除讲师
    handleSelectionChange(selection) {
      this.selection = selection
    },
    deleteByids() {
      // 判断是否有待删除的讲师，如果没有则提示，有则进行删除
      if (!this.selection || this.selection.length === 0) {
        this.$message.warning('请选择您要删除的讲师')
        return
      } else {
        this.selection.forEach(teacher => {
          this.ids.push(teacher.id)
        })
      }
      teacherApi.deleteByIds(this.ids).then(r => {
        this.$message.success('删除成功')
        this.getPageList()
      })
    }
  }
}

</script>
